<template>
  <div class="second-step">
    <el-tabs v-model="secondActive" type="card">
      <el-tab-pane label="所有课程" name="1">
        <!-- 所有课程组件 -->
        <all v-if="secondActive === '1'" :select-data="selectData" @selectNumber="changeBadgeValue"/>
      </el-tab-pane>
      <el-tab-pane name="2">
        <span slot="label">
          已选择课程
          <el-badge :value="badgeValue" class="mark"/>
        </span>
        <!-- 已选择课程组件 -->
        <select-sub v-if="secondActive === '2'" :table-data="selectData"/>
      </el-tab-pane>
    </el-tabs>
    <div style="width:100%">
      <el-button type="primary" style="float:right;" @click="next">下一步</el-button>
      <el-button style="float:right;margin-right:20px;" @click="back">上一步</el-button>
    </div>
  </div>
</template>

<script>
import All from './secondform/allsubject'
import SelectSub from './secondform/selectsubject'
export default {
  name: 'Secondstep',
  components: {
    All,
    SelectSub
  },
  props: {
    selectData: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      secondActive: '1',
      badgeValue: 0,
      data: this.selectData
    }
  },
  methods: {
    changeBadgeValue(val, length) {
      this.badgeValue = length
      this.data = val
    },
    next() {
      this.$emit('secondNext', this.data)
    },
    back() {
      this.$emit('secondBack', this.data)
    }
  }
}
</script>

<style lang="scss">
.second-step {
  margin-top: 30px;
  .mark {
    .el-badge__content {
      background-color: #409eff;
    }
  }
}
</style>
